
$(function () {

    // let user_name = localStorage.getItem("username");
    // console.log(typeof u_name);
    // let res = user_name.split("").splice(3,6,"******").join("");
    // let result = user_name.replace(res,"******");
    // console.log(r);
    // $(".please_replace_login").text(result);
    // $(".please_register").css({
    //     display:"none"
    // })  ;  

    // 放大镜数据渲染
    let data = localStorage.getItem("detailsData");
    let res = JSON.parse(data);
        // console.log(res);
    localStorage.setItem("cartData",JSON.stringify(res));
   
   
    // console.log(res);
    let html_small_img = "";
    let html_list_img = "";
    let html_big_img = "";
    let pro_title = "";
    let details_refer_price = "";
    let details_active_price = "";

    // 商品名称 参考价 活动价 渲染
    for (let attr in res) {
        pro_title += `  <h1>${res[attr].goods_name}</h1>
                        <h2>送牙刷一支｜正品保证｜减轻牙龈问题 </h2>`;
        details_refer_price += `    <dt>
                                        <span>参考价</span>
                                    </dt>
                                    <dd>
                                        <del>
                                            <i>￥</i>
                                            ${res[attr].refer_price}
                                        </del>
                                    </dd>`;
        details_active_price += `   <dt>
                                        <span>活动价</span>
                                    </dt>
                                    <dd>
                                        <span class="main_price">
                                            <i>￥</i>
                                            ${res[attr].new_price % 1 === 0 ?
                `<b>${res[attr].new_price}</b>` :
                `<b>${parseInt(res[attr].new_price)}.</b>
                                                            <span>${((res[attr].new_price - parseInt(res[attr].new_price)).toFixed(2)).toString().slice(2)}</span>`
            } 
                                            
                                        </span>
                                        <span class="trend_disc">
                                            <img src="../img/lowestPrice-bg.png" alt="">
                                            <span class="trend_price">116天内最低</span>
                                        </span>
                                    </dd>`;
        for (let attr_img in res[attr].glass.glass_imgs) {
            html_small_img += ` <div class="small_img_wrapper">
                                    <img src="${res[attr].glass.glass_imgs[attr_img].small_img}" alt="">
                                    <div class="focus"></div>
                                    <div class="patch">
                                    </div>
                                </div>`;
            html_list_img += `  <i>
                                    <img src="${res[attr].glass.glass_imgs[attr_img].list_img}" alt="">
                                </i>`;
            html_big_img += `<img src="${res[attr].glass.glass_imgs[attr_img].big_img}" alt="">`;

        }
    }
    $(".wrap-small-magnifier")
        .html(html_small_img)
        .children()
        .first()
        .addClass("active");
    $(".wrap-choice-magnifier")
        .html(html_list_img)
        .children()
        .first()
        .addClass("active");
    $(".wrap-big-magnifier")
        .html(html_big_img)
        .children()
        .first()
        .addClass("active");

    $(".proinfo_title").html(pro_title);
    $(".reference_price").html(details_refer_price);
    $(".activity_price").html(details_active_price)
    // 商品名称 参考价 活动价 渲染结束


    // 放大镜功能
    // 存储数据
    function Magnify() {

        // 小图部分
        this.small_wrap_ele = $(".wrap-small-magnifier");
        this.small_img_ele = $(".wrap-small-magnifier img");
        this.focus_ele = $(".focus");
        this.patch_ele = $(".patch");

        // 小图的各个值
        // 小图遮罩层的宽
        this.move_focus_width = parseInt(this.focus_ele.width());
        // 小图遮罩层的高
        this.move_focus_height = parseInt(this.focus_ele.height());
        // 小图遮罩层可移动距离
        this.move_focus_range_width = this.small_wrap_ele.width() - this.move_focus_width - 2;
        this.move_focus_range_height = this.small_wrap_ele.height() - this.move_focus_height - 2;


        // 大图部分
        this.big_wrap_ele = $(".wrap-big-magnifier");
        this.big_img_ele = $(".wrap-big-magnifier img");


        // 缩略图部分
        this.thumbnail_eles = $(".wrap-choice-magnifier i");
        this.index = 0;

    }

    // 绑定事件
    Magnify.prototype.bindEvent = function () {
        var magnify_instance = this;
        this.small_wrap_ele.mouseover(function () {
            magnify_instance.toggle("show")
        })
        this.small_wrap_ele.mouseout(function () {
            magnify_instance.toggle("hide")
        })
        for (let k = 0; k < this.thumbnail_eles.length; k++) {

            this.thumbnail_eles.eq(k).click(function () {
                magnify_instance.getIndex(this);
                magnify_instance.changeItem();
            })
        }
        this.small_wrap_ele.mousemove(function (evt) {
            var e = evt || event;
            magnify_instance.move(e.offsetX, e.offsetY);
        })
    }

    // 显示隐藏
    Magnify.prototype.toggle = function (type) {
        if (type === "show") {
            this.focus_ele.css({
                display: "block"
            });
            this.big_wrap_ele.css({
                display: "block"
            });
        }
        if (type === "hide") {
            this.focus_ele.css({
                display: "none"
            });
            this.big_wrap_ele.css({
                display: "none"
            })
        }
    }

    // 获取下标
    Magnify.prototype.getIndex = function (dom) {
        var magnifier_instance = this;
        for (let i = 0; i < this.thumbnail_eles.length; i++) {
            if (dom == this.thumbnail_eles[i]) {
                magnifier_instance.index = i;
                break;
            }
        }
    }

    // 切换图片
    Magnify.prototype.changeItem = function () {
        let list_btn = this;
        $(".wrap-choice-magnifier").on("click", "i", function () {
            $(this)
                .addClass("active")
                .siblings()
                .removeClass("active");
            $(".wrap-small-magnifier")
                .children()
                .eq(list_btn.index)
                .addClass("active")
                .siblings()
                .removeClass("active");
            $(".wrap-big-magnifier")
                .children()
                .eq(list_btn.index)
                .addClass("active")
                .siblings()
                .removeClass("active");
        })
    }

    // 移动部分
    Magnify.prototype.move = function (x, y) {
        var _left = x - this.move_focus_width / 2;
        var _top = y - this.move_focus_height / 2;

        _left = _left < 0 ? 0 : _left;
        _top = _top < 0 ? 0 : _top;


        _left = _left > this.move_focus_range_width ? this.move_focus_range_width : _left;
        _top = _top > this.move_focus_range_height ? this.move_focus_range_height : _top;

        this.focus_ele.css({
            left: _left + "px"
        });
        this.focus_ele.css({
            top: _top + "px"
        });

        var _left_prop = _left / this.move_focus_range_width;
        var _top_prop = _top / this.move_focus_range_height;

        this.big_img_ele.css({
            left: - 350 * _left_prop + "px"
        });
        this.big_img_ele.css({
            top: - 400 * _top_prop + "px"
        });

    }

    new Magnify().bindEvent();
    // 放大镜功能结束

    // 样式 增值服务 选择
    $(".tips a").click(function () {
        $(this)
            .addClass("active")
            .parent()
            .siblings()
            .children()
            .removeClass("active")
    })
    // 样式 增值服务 选择 结束


    // 数量 加减
    // - 减
    $(".reduction").click(function () {
        let inp_val = $(".choose_value").val();
        if (inp_val === "1") {
            $(".reduction").attr("disabled", "disabled");
            $(".reduction").css({
                cursor: "not-allowed"
            })
            return false;
        } else {
            inp_val -= 1;
            $(".choose_value").attr("value", inp_val);
        }
    })

    // - 加
    $(".add").click(function () {
        let inp_val = Number($(".choose_value").val());
        inp_val += 1;
        $(".choose_value").attr("value", inp_val);
    })

    let cart = {};
    // 加入购物车
    $(".add_to_shop_car").on("click", function () {
             (function(){
                // 如果购物车数据存在,那么我们就把购物车数据变成对象； 
                // 如果购物车数据解释时报错我们就重新创建新的的购物车数据; 
                if( localStorage.getItem("cartData")){
                    var cartData = null;
                    try{
                        cartData =  JSON.parse( localStorage.getItem("cartData") );
                        cartData = JSON.parse(localStorage.getItem("cartData"));
                        console.log(cartData)
                        if (cartData[0]["count"]) {
                            cartData[0]["count"] += Number($(".choose_value").val());
                        }else{
                            cartData[0]["count"] = Number($(".choose_value").val());
                        }
                        localStorage.setItem("cartData",JSON.stringify(cartData))
                    }catch(e){
                        cartData = {};
                    }

                    return cartData;
                } else{
                    return {};
                }
        })();

   
       
        // 
     
    });
     // 跳转购物车页面
     $(".but_it_now").click(function(){
        location.href = "../html/shop_cart.html" ;
    })    


    // 倒计时
    
    function countDown(){
        var target = new Date("2021/6/2");
        var r = target.getTime() - Date.now();

        var day = parseInt(r / 1000 / 3600 / 24 );
        var hours = parseInt( r / 1000 / 3600 % 24);
        var minutes = parseInt( r / 1000 / 60 % 60);
        var seconds = parseInt( r / 1000 % 60);

     $(".time_date").text(day);
     $(".time_hour").text(hours);
     $(".time_minute").text(minutes);
     $(".time_second").text(seconds);
  }

  setInterval( countDown , 1000 )

  countDown();


}) 
